<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>课堂</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<link rel="stylesheet" href="css/mui.min.css">
		<script src="js/mui.min.js"></script>
		<script src='js/jquery.min.js'></script>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-icon mui-icon-right-nav mui-pull-right mui-icon mui-icon-plusempty" id="action"></a>
			<h1 class="mui-title">课堂</h1>
		</header>

		<div class="mui-content">
			<div id="slider" class="mui-slider">
				<!-- 窗口目录 -->
				<div id="sliderSegmentedControl" class="mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
					<a class="mui-control-item" href="#item1mobile">我教的课</a>
					<a class="mui-control-item" href="#item2mobile">我听的课</a>
				</div>
				<!-- 窗口条 -->
				<div id="sliderProgressBar" class="mui-slider-progress-bar mui-col-xs-6"></div>
				<!-- 内容窗口 -->
				<div class="mui-slider-group">
					<!-- 我教的课 窗口 -->
					<div id="item1mobile" class="mui-slider-item mui-control-content mui-active">
					</div>
					<!-- 我听得课 窗口 -->
					<div id="item2mobile" class="mui-slider-item mui-control-content">
					</div>
				</div>
			</div>
		</div>

		<!-- actionsheet操作表 -->
		<div id="sheet1" class="mui-popover mui-popover-bottom mui-popover-action ">
			<!-- 可选择菜单 -->
			<ul class="mui-table-view">
				<li class="mui-table-view-cell">
					<a href="#" id="create_course">创建课程</a>
				</li>
				<li class="mui-table-view-cell">
					<a href="#" id="join_course">加入课程</a>
				</li>
			</ul>
			<!-- 取消菜单 -->
			<ul class="mui-table-view">
				<li class="mui-table-view-cell">
					<a href="#sheet1"><b>取消</b></a>
				</li>
			</ul>
		</div>


		<script>
			mui.init({
				swipeBack: false
			});

			(function($) {
				$('.mui-scroll-wrapper').scroll({
					indicators: true //是否显示滚动条
				});
				var sliderSegmentedControl = document.getElementById('sliderSegmentedControl');
				$('.mui-input-group').on('change', 'input', function() {
					if (this.checked) {
						sliderSegmentedControl.className =
							'mui-slider-indicator mui-segmented-control mui-segmented-control-inverted mui-segmented-control-' + this.value;
						sliderProgressBar.setAttribute('style', sliderProgressBar.getAttribute('style'));
					}
				});
			})(mui);

			document.getElementById("action").addEventListener('tap', function(e) {
				mui('#sheet1').popover('toggle');
			});

			var uID;
			mui.plusReady(function() {
				uID = plus.storage.getItem('uID');
				init();
			});

			//创建课程
			document.getElementById("create_course").addEventListener('tap', function(e) {
				e.detail.gesture.preventDefault();
				var btnArray = ['取消', '确定'];
				mui.prompt('请输入课程号：', '', '创建课程', btnArray, function(e) {
					if (e.index == 1) {
						mui.ajax({
							url: 'http://120.27.247.180:8080/School/course/createCourse',
							type: "post",
							async: false,
							data: {
								"uID": uID,
								"cName": e.value
							},
							dataType: "jsonp",
							contentType: "application/x-www-form-urlencoded; charset=utf-8",
							jsonp: "jsoncallback",
							success: function(data) {
								data = JSON.parse(data);
								if (data['suc'])
									mui.alert('创建成功，课程号' + data['cID'], '提示', function() {
										init();
									});
								else
									mui.alert(data['msg'], '提示', function() {});
							},
							error: function() {
								mui.toast("服务器异常，请稍后再试");
								console.log("未连接到服务器");
							}
						});
					}
				})
			});
			//加入课程
			document.getElementById("join_course").addEventListener('tap', function(e) {
				e.detail.gesture.preventDefault();
				var btnArray = ['取消', '确定'];
				mui.prompt('请输入课程号：', '', '加入课程', btnArray, function(e) {
					if (e.index == 1) {
						mui.ajax({
							url: 'http://120.27.247.180:8080/School/userCourse/joinCourse',
							type: "post",
							async: false,
							data: {
								"uID": uID,
								"cID": e.value
							},
							dataType: "jsonp",
							contentType: "application/x-www-form-urlencoded; charset=utf-8",
							jsonp: "jsoncallback",
							success: function(data) {
								data = JSON.parse(data);
								if (data['suc'])
									mui.alert('加入成功', '提示', function() {
										init();
									});
								else
									mui.alert(data['msg'], '提示', function() {
										init();
									});
							},
							error: function() {
								mui.toast("服务器异常，请稍后再试");
								console.log("未连接到服务器");
							}
						});
					}
				})
			});

			//初始化数据,根据用户id获得用户教的课、听的课
			function init() {
				//我教的课 元素获得
				mui.ajax({
					url: 'http://120.27.247.180:8080/School/course/queryCourseByUID',
					type: "post",
					data: {
						"uID": uID
					},
					dataType: "jsonp",
					contentType: "application/x-www-form-urlencoded; charset=utf-8",
					jsonp: "jsoncallback",
					success: function(data) {
						data = JSON.parse(data);
						var teachEle = jQuery("#item1mobile");
						teachEle.empty();
						var teachInfo = data.courseList;
						var numList = data.numList;
						for (var i = 0, l = teachInfo.length; i < l; i++) {
							var tempEle = '<div class="mui-card" style="background: url(image/c0.jpg);" ' +
								'onclick="mui.openWindow({url:\'group1/course_teacher.html\',extras:{ cID:' + teachInfo[i]['cID'] +
								'}})">' +
								'<div class="mui-card-header">' + teachInfo[i]['cName'] + '</div>' +
								'<div class="mui-card-content">' +
								'<div class="mui-card-content-inner">' + teachInfo[i]['className'] + '</div>' +
								'</div>' +
								'<div class="mui-card-footer">人数：' + numList[i] + '</div>' +
								'</div>';
							teachEle.append(tempEle);
						}
					},
					error: function() {
						mui.toast("获取教课信息失败");
					}
				});

				//我听的课 元素获得
				mui.ajax({
					url: 'http://120.27.247.180:8080/School/userCourse/queryCourseByUID',
					type: "post",
					data: {
						"uID": uID
					},
					dataType: "jsonp",
					contentType: "application/x-www-form-urlencoded; charset=utf-8",
					jsonp: "jsoncallback",
					success: function(data) {
						data = JSON.parse(data);
						var listenEle = jQuery("#item2mobile");
						listenEle.empty();
						var listenInfo = data.courseList;
						var teacherInfo = data.nameList;
						for (var i = 0, l = listenInfo.length; i < l; i++) {
							var img = 'image/c' + ((i % 3) + 1) + '.jpg'; //获得背景图片
							var tempEle = '<div class="mui-card" style="background: url(' + img + ');" ' +
								'onclick="mui.openWindow({url:\'group1/course_student.html\',extras:{ cID:' + listenInfo[i]['cID'] +
								'}})">' +
								'<div class="mui-card-header">' + listenInfo[i]['cName'] + '</div>' +
								'<div class="mui-card-content">' +
								'<div class="mui-card-content-inner">' + listenInfo[i]['className'] + '</div></div>' +
								'<div class="mui-card-footer">' + teacherInfo[i] + '</div>' +
								'</div>';
							listenEle.append(tempEle);
						}
					},
					error: function() {
						mui.toast("获取听课信息失败");
					}
				});
			}
		</script>
	</body>
</html>
